<template>
<div id="nav">
    <div class="dh">
    <ul>
        <li><a href="#">主站</a></li>
        <li><a href="#">注册&登录</a></li>
        <li><router-link to="loginTest">注册&登录</router-link></li>
        <li><a href="#">下载APP</a></li>
        <li><a href="#">学习</a></li>
        <li><a href="#">推荐</a></li>
        <li><a href="#">热门</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">时下流行</a></li>
        <li><a href="#">开发工具</a></li>
        <li><a href="#">加入我们</a></li>
    </ul>
</div>
<!-- <router-view></router-view> -->
</div>

</template>

<script>
// import loginTest from 'LoginTest.vue';
export default {
    data (){
        return{

        }
    },

}
</script>

<style>

body{
  margin: 0;
}
    #nav{
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #268ab4;
}
ul{
    margin: 0;
    padding: 0;
    display: flex;
}
ul li{
    list-style: none;
    margin: 0 20px;
    transition: 0.2s;
}
ul li a{
    display: block;
    position: relative;
    text-decoration: none;
    padding: 5px;
    font-size: 18px;
    font-family: sans-serif;
    color: #fff;
    transition: 0.2s;
}
ul:hover li a{
    transform: scale(1.5);
    opacity: .2;
    filter: blur(5px);
}
ul li a:hover{
    transform: scale(1.5);
    opacity: 1;
    filter: blur(0);
}
ul li a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff497c;
    transition: 0.2s;
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1;
}
ul li a:hover:before{
    transition: transfrom 0.2s;
    transform-origin: left;
    transform: scaleX(1);
}
</style>
